<template>
  <div @click="close" class="zmage-box">
    <!-- <img v-for="item in items" :key="item.id" :src="item" alt=""> -->
    <transition name="zoom" @after-leave="$emit('destroy')">
      <img
        v-show="visible"
        @click="stop($event)"
        class="image-item"
        :src="path"
        alt=""
      />
    </transition>
    <img class="close" :src="closeIcon" alt="关闭" @click="close" />
  </div>
</template>

<script>
export default {
  props: {
    path: {
      type: [String, Array],
    },
  },
  data() {
    return {
      closeIcon: ``,
      visible: false,
    };
  },
  mounted() {
    this.visible = true;
  },
  methods: {
    close() {
      this.visible = false;
    },
    stop(e) {
      e && e.preventDefault();
      e && e.stopPropagation();
    },
  },
};
</script>

<style lang="less" scoped>
.flex() {
  display: -moz-box;
  /* Firefox */
  display: -ms-flexbox;
  /* IE10 */
  display: -webkit-box;
  /* Safari */
  display: -webkit-flex;
  /* Chrome, WebKit */
  /* display: box; */
  display: flexbox;
  display: flex;
}

@media screen and (min-width: 751px) {
  .zmage-box {
    position: fixed;
    z-index: 99999999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    .flex();
    align-items: center;
    justify-content: center;
    .image-item {
      // width: 80%;
      max-height: 80%;
    }
    .close {
      position: absolute;
      z-index: 9;
      width: 50px;
      height: 50px;
      top: calc(10% - 70px);
      right: calc(10% - 70px);
      cursor: pointer;
    }
  }

  @keyframes ZoomIn {
    from {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
      opacity: 1;
    }
  }

  @keyframes ZoomOut {
    from {
      opacity: 1;
    }

    50% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
      opacity: 0;
    }
  }

  .zoom-enter-active {
    animation: ZoomIn 0.5s;
  }

  .zoom-leave-active {
    animation: ZoomOut 0.5s;
  }
}

@media screen and (max-width: 750px) {
  .zmage-box {
    position: fixed;
    z-index: 99999999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    .flex();
    align-items: center;
    justify-content: center;
    .image-item {
      // width: 80%;
      max-height: 80%;
    }
    .close {
      position: absolute;
      z-index: 9;
      width: 50px;
      height: 50px;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
  }

  @keyframes ZoomIn {
    from {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
      opacity: 1;
    }
  }

  @keyframes ZoomOut {
    from {
      opacity: 1;
    }

    50% {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
      opacity: 0;
    }
  }

  .zoom-enter-active {
    animation: ZoomIn 0.5s;
  }

  .zoom-leave-active {
    animation: ZoomOut 0.5s;
  }
}
</style>